<template>
	<view>
		<image class="customImage vivify" :src="src" 
		 :class="loading?'opacity-0':'opacity-1 fadeIn'"
		 :mode="mode" :lazy-load="lazyLoad" @error="onLoadFail"
		@load="onLoadComplete" 
		/>
	</view>
</template>

<script>
	export default{
		props:{
			src:{
				type:String,
				default:""
			},
			mode:{
				type:String,
				default:"aspectFill"
			},
			lazyLoad:{
				type:Boolean,
				default:false
			}
		},
		mounted() {
			// 容错
			setTimeout(()=>{
				this.loading = false
			},3000)
		},
		data(){
			return {
				loading:true
			}
		},
		methods:{
			onLoadFail(){
				console.log(`图片加载失败，src=${this.src}`)
			},
			onLoadComplete(){
				this.loading = false
			}
		}
	}
</script>

<style scoped>
	.customImage{
		width: inherit;
		height: inherit;
		border-radius: inherit;
		will-change: transform;
	}
	.opacity-0{
		opacity: 0;
	}
	.opacity-1{
		opacity: 1;
	}
</style>